<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<meta name="Generator" content="EditPlus" />
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
#page1{
 	width:1050px;
 	height:1750px;
 	border-radius:45px;
 	-moz-border-radius:45px;
 	-webkit-border-radius:45px;
 	margin: 0 auto;
	padding: 0;
	border-width:rough;
	border-style:dashed;
	border-color:#FFC125;
 	}
#ad1{
	float:left;
	border-radius:20px;
 	-moz-border-radius:20px;
 	-webkit-border-radius:20px;
	width:580px;
	height:500px;
	margin:30px 0px 0px 0px;
	box-shadow:5px 5px 5px #AAAAAA;
	-webkit-transform:rotate(-2deg);
    -moz-transform:rotate(-2deg);
    transform:rotate(-2deg); 
    border-width:1px;
	border-style:solid;
	border-color:#AAAAAA;
	background-color:#FFFFFF;
	}
#ad2{
	margin:50px 0px 0px 10px;
}
#ad3{
	z-index:-1;
	position:absolute;
}
#search1{
	float:left;
	width:420px;
	height:550px;
	border-radius:20px;
 	-moz-border-radius:20px;
 	-webkit-border-radius:20px;
	margin:10px 0px 0px 10px;
	box-shadow:3px 3px 3px #AAAAAA;
	border-width:rough;
	border-style:dashed;
	border-color:#228B22;
}
#search2{
	padding:5px 0px 0px 10px;
}
#search3{
	float:left;
	padding:5px 0px 0px 10px;
}
#search4{
	padding:7px 0px 0px 15px;
	
}
/*放大鏡圖片*/
#search5{
	float:left;
	margin:0px 0px 0px 10px;
	width:35px;
	height:32px;
	border:1px;
	border-color:#9E9E9E;
	border-style:solid;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
}

#search6{
	float:left;
	padding:0px 0px 0px 0px;
}
/*查詢的最外層*/
#search7{
	float:left;
	padding:15px 0px 0px 7px;
}
#meant1{
	padding:15px 0px 0px 30px;
	
}
#meant2{
	color: #FF8888;
	padding:10px 0px 0px 30px;
}
#season1{
	color:#0000CC;
	padding:10px 0px 0px 30px;
}
#season2{
	color:#0000FF;
	padding:10px 0px 0px 30px;
}
#vegetable1{
	color:#00B400;
	padding:10px 0px 0px 30px;
}
#vegetable2{
	color:#00D23C;
	padding:10px 0px 0px 30px;
}
#vegetable3{
	color:#00D23C;
	padding:10px 0px 0px 30px;
}
#desert1{
	padding:10px 0px 0px 30px;
	color:#FF44AA;
}
#desert2{
	padding:10px 0px 0px 30px;
	color:#FF88C2;
}
#desert3{
	padding:10px 0px 0px 0px;
	color:#FF88C2;
}
#staple1{
	padding:10px 0px 0px 30px;
	color:#E63F00;
}
#staple2{
	padding:10px 0px 0px 10px;
	color:#FF5511;
}
#bean1{
	padding:10px 0px 0px 30px;
	color:#FFCC22;
}
#bean2{
	padding:10px 0px 0px 10px;
	color:#FFBB00;
}
#other1{
	padding:0px 0px 0px 40px;
	color:#EE7700;
}
#other2{
	padding:0px 0px 0px 10px;
	color:#FF8800;
}
#btm{
	margin:10px 0px 10px 180px;
}
#hot1{
	float:left;
	width:1000px;
	height:550px;
	border-radius:20px;
 	-moz-border-radius:20px;
 	-webkit-border-radius:20px;
	margin:30px 0px 0px 20px;
	box-shadow:3px 3px 3px #AAAAAA;
	border-width:rough;
	border-style:dashed;
	border-color:#FF0000;
	
}
#hot2{
	padding:20px 0px 5px 410px;
	border-bottom:3px dashed #FF0000;
	background-color:#FFE1FF;
	border-radius:20px;
 	-moz-border-radius:20px;
 	-webkit-border-radius:20px;
}
/*新到食譜*/
#new1{
float:left;
	width:1000px;
	height:550px;
	border-radius:20px;
 	-moz-border-radius:20px;
 	-webkit-border-radius:20px;
	margin:30px 0px 0px 20px;
	box-shadow:3px 3px 3px #AAAAAA;
	border-width:rough;
	border-style:dashed;
	border-color:#0000FF;
}
#new2{
	padding:20px 0px 0px 110px;
	border-bottom:3px dashed #0000FF;
	background-color:#C6E2FF;
	border-radius:20px;
 	-moz-border-radius:20px;
 	-webkit-border-radius:20px;
}
#new3{
	padding:0px 0px 10px 290px;
}
#tdstyle{
	height:200px;
	width: 180px;
	padding:0px 0px 0px 10px;
	border-width:rough;
	border-style:dotted;
	border-color:#FFAFD6;
	border-radius:20px;
 	-moz-border-radius:20px;
 	-webkit-border-radius:20px;
}
#tdstyle1{
	height:200px;
	width: 180px;
	padding:0px 0px 0px 10px;
	border-width:rough;
	border-style:dotted;
	border-color:#77DDFF;
	border-radius:20px;
 	-moz-border-radius:20px;
 	-webkit-border-radius:20px;
}
.green {  
    color: #e8f0de;  
    border: solid 1px #538312;  
    background: #64991e;  
    background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));  
    background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');  
}  
.green:hover {  
    background: #538018;  
    background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));  
    background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');  
}  
.green:active {  
    color: #a9c08c;  
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));  
    background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');  
}
.rosy {  
    color: #fae7e9;  
    border: solid 1px #b73948;  
    background: #da5867;  
    background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));  
    background: -moz-linear-gradient(top,  #f16c7c,  #bf404f);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');  
}  
.rosy:hover {  
    background: #ba4b58;  
    background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));  
    background: -moz-linear-gradient(top,  #cf5d6a,  #a53845);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');  
}  
.rosy:active {  
    color: #dca4ab;  
    background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));  
    background: -moz-linear-gradient(top,  #bf404f,  #f16c7c);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');  
} 
/*廣告輪播css*/ 
#abgneBlock {
		width: 550px;
		height: 480px;
		position: relative;
		overflow: hidden;
		border: 1px solid #ccc;
		margin:10px 0px 0px 15px;
		border-radius:20px;
 		-moz-border-radius:20px;
 		-webkit-border-radius:20px;
		
	}
	#abgneBlock ul.list {
		padding: 0;
		margin: 0;
		list-style: none;
		position: absolute;
		width: 9999px;
		height: 100%;
	}
	#abgneBlock ul.list li {
		float: left;
		width: 550px;
		height: 100%;
	}
	#abgneBlock .list img{
		width: 100%;
		height: 100%;
		border: 0;
	}
	#abgneBlock ul.playerControl {
		margin: 0;
		padding: 0;
		list-style: none;
		position: absolute;
		bottom: 5px;
		right: 5px;
		height: 14px;
	}
	#abgneBlock ul.playerControl li {
		float: left;
		width: 23px;
		height: 14px;
		cursor: pointer;
		margin: 0px 2px;
		background: url(images/rect_ctrl.png) no-repeat 0 0;
	}
	#abgneBlock ul.playerControl li.current { 
		background-position: -23px 0;
	}  
</style>
<script type="text/javascript">
	$(function(){
		// 先取得必要的元素並用 jQuery 包裝
		// 再來取得 $block 的高度及設定動畫時間
		var $block = $('#abgneBlock'),
			$slides = $('ul.list', $block),
			_width = $block.width(),
			$li = $('li', $slides),
			_animateSpeed = 600, 
			// 加入計時器, 輪播時間及控制開關
			timer, _showSpeed = 3000, _stop = false;

		// 產生 li 選項
		var _str = '';
		for(var i=0, j=$li.length;i<j;i++){
			// 每一個 li 都有自己的 className = playerControl_號碼
			_str += '<li class="playerControl_' + (i+1) + '"></li>';
		}

		// 產生 ul 並把 li 選項加到其中
		var $playerControl = $('<ul class="playerControl"></ul>').html(_str).appendTo($slides.parent()).css('left', function(){
			// 把 .playerControl 移到置中的位置
			return (_width - $(this).width()) / 2;
		});
		
		// 幫 li 加上 click 事件
		var $playerControlLi = $playerControl.find('li').mouseover(function(){
			var $this = $(this);
			$this.addClass('current').siblings('.current').removeClass('current');
			clearTimeout(timer);
			// 移動位置到相對應的號碼
			$slides.stop().animate({
				left: _width * $this.index() * -1
			}, _animateSpeed, function(){
				// 當廣告移動到正確位置後, 依判斷來啟動計時器
				if(!_stop) timer = setTimeout(move, _showSpeed);
			});

			return false;
		}).eq(0).mouseover().end();

		// 如果滑鼠移入 $block 時
		$block.hover(function(){
			// 關閉開關及計時器
			_stop = true;
			clearTimeout(timer);
		}, function(){
			// 如果滑鼠移出 $block 時
			// 開啟開關及計時器
			_stop = false;
			timer = setTimeout(move, _showSpeed);
		});
		
		// 計時器使用
		function move(){
			var _index = $('.current').index();
			$playerControlLi.eq((_index + 1) % $playerControlLi.length).mouseover();
		}
	});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="<c:url value="/css/style.css" />" rel="stylesheet" type="text/css" media="screen" />
<title>welcome FOOD正神食譜網</title>

</head>
<body>
<!-- 引入共同的頁首 -->
<c:set var="funcName" value="IND" scope="session"/>
<jsp:include page="/top/top.jsp" />

<!-- 從這裡開始寫 -->

	<div id="page1">
	   <form action="<c:url value="/recipe/SearchRecipe" />" method="post" >
	 	<div id="ad1">
	 		<div id="abgneBlock">
			<ul class="list">
			<li><a target="_blank" href="#"><img src="images/a.jpg"></a></li>
			<li><a target="_blank" href="#"><img src="images/b.jpg"></a></li>
			<li><a target="_blank" href="#"><img src="images/g.jpg"></a></li>
			<li><a target="_blank" href="#"><img src="images/n.jpg"></a></li>
			<li><a target="_blank" href="#"><img src="images/e.jpg"></a></li>
			</ul>
			</div>
	    </div>
	     <div id="search1">
	    	<div id="search2">
	    	 <img id="search3" width="40px" height="40px" src="<c:url value="/images/h1.jpg"/>"/>
		 	 <div id="search7">
	    		<img id="search5" src="<c:url value="/images/h3.png"/>"/>
	    	     	
	    	     	 <input id="search6" style="height: 30px; outline:none; " type="text" name="search" autofocus placeholder="請輸入食譜名稱" size="20" maxlength="30" /> 
	    	 	     <input style="height: 34px;border-top-right-radius:5px;
				      border-bottom-right-radius:5px;"class="button green" 
				      name="searchbtn" type="submit" value="查詢食譜" />
				      
	    	          <!-- outline:none 消除chorm瀏覽器的聚焦模式的黃框 -->
		 	 </div>
		 	 <img id="search4" width="40px" height="40px" src="<c:url value="/images/h1.jpg"/>"/>
	     </div>
	     <div>
	     	<div id="meant1"><b><font style=font-size:0.6cm;color:#FF3333>肉類:</font></b></div>
	     	<div id="meant2" >
		     	<b><font style=font-size:0.5cm><input type="checkbox" name="category" value="1">牛肉</font></b>
		     	<b><font style=font-size:0.5cm> <input type="checkbox" name="category" value="2">豬肉</font></b>
			    <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="3">雞肉</font></b>
			    <b><font style=font-size:0.5cm> <input type="checkbox" name="category" value="4">羊肉</font></b>
			    <b><font style=font-size:0.5cm> <input type="checkbox" name="category" value="5">鴨肉</font></b>
			    <b><font style=font-size:0.5cm> <input type="checkbox" name="category" value="6">鵝肉</font></b>
			</div>
	      	</div>
	    
	     <div>
	    	 <div id="season1"><b><font style=font-size:0.6cm>海鮮類:</font></b></div>
	    	  <div id="season2">
		     	<b><font style=font-size:0.5cm> <input type="checkbox" name="category" value="7">魚</font></b>
		     	<b><font style=font-size:0.5cm> <input type="checkbox" name="category" value="8">貝類</font></b>
		     	<b><font style=font-size:0.5cm> <input type="checkbox" name="category" value="9">甲殼類</font></b>
		     	<b><font style=font-size:0.5cm> <input type="checkbox" name="category" value="10">頭族類</font></b>
		     	<b><font style=font-size:0.5cm> <input type="checkbox" name="category" value="11">軟體族類</font></b>
		      </div>
	     </div>
	       
	     <div>
	       <div id="vegetable1"><b><font style=font-size:0.6cm>蔬菜類:</font></b></div>
	      	 <div id="vegetable2">
		      	 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="12">葉菜類</font></b>
		      	 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="13">根莖類</font></b>
		      	 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="14">花菜花瓣類</font></b>
		      	 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="15">菇蕈類</font></b>
		     </div>
		     <div id="vegetable3">
		      	 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="16">海菜類</font></b>
		      	 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="17">種子核果類</font></b>
		      	 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="18">蒟蒻類</font></b>
		      	 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="19">水果類</font></b>
	      	 </div>
	     </div>
	     
	     <div>
	      <div id="desert1"><b><font style=font-size:0.6cm>甜點:</font></b></div>
	      	<div id="desert2">
	         <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="20">麵包</font></b>
			 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="21">西式點心</font></b>
			 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="22">中式點心</font></b>
			 <div id="desert3">
			 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="23">其他點心</font></b>
			 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="24">飲料</font></b>
			 </div>
			</div>
		</div>
		
		<div> 
	      <div id="staple1">
	         <b><font style=font-size:0.6cm>主食:</font></b>
	     	 <b><font  id="staple2"style=font-size:0.5cm><input type="checkbox" name="category" value="26">米類製品</font></b>
	     	 <b><font style=font-size:0.5cm><input type="checkbox" name="category" value="29">麵粉類製品</font></b>
	      </div>
		<div id="bean1">
		 <b><font  style=font-size:0.6cm>豆類:</font></b>
		 <b><font id="bean2" style=font-size:0.5cm><input type="checkbox" name="category" value="25">豆類</font></b>
			<b><font id="other1" style=font-size:0.6cm>其他:</font></b>
			 <b><font id="other2" style=font-size:0.5cm><input type="checkbox" name="category" value="32">其他</font></b>
		</div>
	    </div>
	    <input id="btm" style="height: 34px;border-radius:10px;
 			-moz-border-radius:10px;-webkit-border-radius:10px;
 			"class="button rosy" type="submit" name="searchbtn" value="送出查詢" />
	 </div>
	 <div id="hot1">
	    	<div id="hot2">
	    		<b><font style="font-size:1.2cm;-webkit-text-stroke:2px;-webkit-text-stroke-color:white;-webkit-text-fill-color:#FF0000">HOT FOOD</font></b>
	    	</div>
		<% int z=0; %> 
	    	<table style="padding:30px 0px 0px 5px;">
	    	<tr>
	    	<c:forEach varStatus="stVar" var="listRecipeScore" items="${listRecipeScore}">
	     	<td id="tdstyle">
	     	<a href="<c:url value='/recipe/ShowRecipe?rid=${listRecipeScore.rid}' />">
               	<img style="margin:0px 0px 0px 10px;" height='150' width='150' src='${pageContext.servletContext.contextPath}/getImg?id=${listRecipeScore.rid}&type=RECIPE'>
               	<br/>
               	<div style="margin:0px 0px 0px 5px;color:#FF0000"><b>${listRecipeScore.rname}</b>&nbsp&nbsp&nbsp<span style="float:right"><img style="width:20px;height:30px;" src="<c:url value="/images/ice.png"/>"/><b>${listRecipeScore.rscore}</span></div>
               	</a>
	  	</td>
	   	<%  z++; 
                 if(z%5==0){
                	 out.print("</tr><tr>");
                 }
              %>
	    </c:forEach>
	    </tr>
	    </table> 
	    </div>
	 
	    <div id="new1">
	    	<div id="new2">
	    		<div id="new3">
	    		<b><font style="font-size:1.2cm;-webkit-text-stroke:2px;-webkit-text-stroke-color:white;-webkit-text-fill-color:#0000FF">NEW FOOD</font></b>
	    		</div>
	    	</div>
	    	<% int i=0; %> 
	    	<table style="padding:30px 0px 0px 5px;">
	    	<tr>
	    	<c:forEach varStatus="stVar" var="listRecipe" items="${listRecipe}">
	     	<td id="tdstyle1">
	     	<a href="<c:url value='/recipe/ShowRecipe?rid=${listRecipe.rid}' />">
               	<img style="margin:0px 0px 0px 10px;" height='150' width='150' src='${pageContext.servletContext.contextPath}/getImg?id=${listRecipe.rid}&type=RECIPE'>
               	<br/>
               	<div style="margin:0px 0px 0px 5px;color:#0000FF"><b>${listRecipe.rname}</b>&nbsp&nbsp&nbsp<span style="float:right"><img style="width:20px;height:30px;" src="<c:url value="/images/ice.png"/>"/><b>${listRecipe.rscore}</span></div>
               	</a>
	  		</td>
	   		 <%  i++; 
                 if(i%5==0){
                	 out.print("</tr><tr>");
                 }
              %>
	    </c:forEach>
	    </tr>
	    </table>
	    </div>
	  </form>
	 </div>
	<c:if test="${not empty success }">
		<script type="text/javascript">
		$(function() {
			alert("註冊成功!!");
		})
		</script>
		</c:if>
	
<!-- 寫到這裡結束 -->

<div id="footer-wrapper">
	<div id="footer">
		<p>Copyright (c) 2010 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/" rel="nofollow">FCT</a>.</p>
	</div>
</div>
</body>
</html>